<template>
  <div>
    <v-centerForm>
      <template slot='left'>
        <el-form inline :model="searchForm" ref="searchForm" label-width="60px">
          <el-form-item label="角色名"
                        prop="name">
            <el-input placeholder="请输入角色名" v-model="searchForm.name"></el-input>
          </el-form-item>
          <el-form-item label="标识"
                        prop="code">
            <el-input placeholder="请输入标识" v-model="searchForm.code"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
            <el-button icon="el-icon-refresh-left" @click="_=>this.$refs.searchForm.resetFields()">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot='right'>
        <el-button type="danger" icon="el-icon-delete" @click="delSelectData">批量删除</el-button>
      </template>
    </v-centerForm>
    <v-tableEncapsulation :loading="loadingBtn.tableLoading" :columnData="columnData" :tableSize="pagination.size"
                         :tableData="tableData" :tableTotal="pagination.total"  :currentPage="pagination.current"
                         @currentPage="currentPage" @selectionChange="selectionChange">
      <el-table-column slot="selection" :selectable="row=>!row.init" type="selection" align="center">
      </el-table-column>
      <el-table-column slot="ena" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag effect="dark" v-if="scope.row.ena" type="success">启用</el-tag>
          <el-tag effect="dark" v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column slot="operate" label="操作" align="center" width="300px">
        <template slot-scope="scope">
          <el-tooltip v-if="!scope.row.init" class="item" effect="dark" content="编辑" placement="top">
            <i class="el-icon-edit-outline table-icon-btn color-primary" @click="editRole(scope.$index, scope.row)"></i>
          </el-tooltip>
          <el-tooltip v-if="!scope.row.init" class="item" effect="dark" content="删除" placement="top">
            <i class="el-icon-delete table-icon-btn color-error" @click="delRole(scope.$index, scope.row)"></i>
          </el-tooltip>
          <el-tooltip v-if="!scope.row.init" class="item" effect="dark" :content="scope.row.ena?'禁用':'启用'"
                      placement="top">
            <i
              :class="[scope.row.ena ? 'el-icon-circle-close' : 'el-icon-circle-check', 'table-icon-btn','color-warning']"
              @click="enaOrDisUser(scope.$index, scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="分配权限" placement="top">
            <i class="iconfont admin-fenpeiguanlijiaose  table-icon-btn color-success"
               @click="assignPermission(scope.$index, scope.row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </v-tableEncapsulation>
    <el-dialog title="分配权限" :visible.sync="assignFormVisible" @closed="closeDialog">
      <el-form v-loading="loadingBtn.diaSubmitBtn" ref="assignForm" :label-width="formLabelWidth">
        <el-form-item label="权限" prop="rolePermission">
          <el-tree default-expand-all :data="treeInfo.permissionTreeData" ref="tree"
                   show-checkbox v-loading="treeInfo.permissionTreeLoading"
                   node-key="id" highlight-current check-strictly
                   :props="treeInfo.defaultProps">
                    <span slot-scope="{ node, data }">
                        <span>
                            <i :class="data.type|treeIconFormatFilter"></i> {{ data.label }}
                        </span>
                     </span>
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="assignFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loadingBtn.diaSubmitBtn" @click="assignFormSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import router from '@/router'

import { listCheckedPermissionForRole, queryPageList, deleteById, disOrEnaAccount, batchDeletionByIdList, assignmentPermissionForRole } from '@/api/system/role'
import { getRightsList } from '@/api/system/rightsManagement'

export default {
  name: 'roleManagementList',

  data () {
    return {
      searchForm: { name: null, code: null },
      loadingBtn: {
        diaSubmitBtn: false,
        tableLoading: false
      },
      currentRoleId: [],
      treeInfo: {
        permissionTreeData: [],
        permissionTreeLoading: false,
        defaultProps: {
          label: 'label',
          children: 'pChild'
        }
      },
      // 列
      columnData: [
        {
          slot: 'selection'
        }, {
          type: 'index',
          label: '序号'
        }, {
          label: '角色名',
          prop: 'appellation'
        }, {
          label: '描述',
          prop: 'desc'
        }, {
          label: '标识',
          prop: 'num'
        }, {
          slot: 'ena'
        }, {
          slot: 'operate',
          label: '操作'
        }
      ],
      tableData: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0,
        params: {}
      },
      // 表格多选选择数据
      tableSelectData: [],
      assignFormVisible: false,
      // 表单标签宽度
      formLabelWidth: '100px'
    }
  },
  filters: {
    /**
     * 根据权限类型 转换为图标
     * @param permissionType
     */
    treeIconFormatFilter (permissionType) {
      if (permissionType === 'menu') {
        return 'el-icon-s-unfold'
      } else if (permissionType === 'button') {
        return 'el-icon-open'
      } else {
        return 'el-icon-link'
      }
    }
  },
  methods: {
    search () {
      this.pagination.name = this.searchForm.name
      this.pagination.code = this.searchForm.code
      this.pagination.current = 1
      this.getTableData()
    },
    /**
     * 表格数据初始化
     */
    getTableData () {
      this.loadingBtn.tableLoading = true
      queryPageList(this.pagination).then(({ data, code }) => {
        if (code === this.$constant.SUCCESS) {
          this.tableData = data.records
          this.pagination.total = data.total
        }
        this.loadingBtn.tableLoading = false
        this.loadingBtn.diaSubmitBtn = false
      })
    },
    /**
     * 编辑按钮
     * @param index
     * @param row
     */
    editRole (index, row) {
      const query = {
        pageFlag: 'edit',
        id: row.id
      }
      router.push({ path: '/roleManagementAdd', query: query })
    },
    /**
     * 删除单条操作
     */
    delRoleAction (id) {
      deleteById(id).then(({ code, msg }) => {
        if (code === this.$constant.SUCCESS) {
          this.$message.success(msg)
          this.getTableData()
        }
      })
    },
    /**
     * 删除按钮
     * @param index
     * @param row
     */
    delRole (index, row) {
      this.$confirm('是否确认删除?', '确认删除').then(_ => {
        this.delRoleAction(row.id)
      }).catch(_ => {
      })
    },
    /**
     * 停启用操作
     * @param index
     * @param row
     */
    enaOrDisUserAction (id) {
      disOrEnaAccount(id).then(({ code, msg }) => {
        if (code === this.$constant.SUCCESS) {
          this.$message.success(msg)
          this.getTableData()
        }
      })
    },
    /**
     * 停用按钮
     * @param index
     * @param row
     */
    enaOrDisUser (index, row) {
      const title = row.ena ? '禁用' : '启用'
      this.$confirm(`是否确认${title}?`, `确认${title}`).then(_ => {
        this.enaOrDisUserAction(row.id)
      }).catch(_ => {
      })
    },
    /**
     * 关闭分配角色弹窗
     */
    closeDialog () {
      this.loadingBtn.diaSubmitBtn = false
      this.currentRoleId = ''
      this.$refs.tree.setCheckedKeys([])
    },
    /**
     * 分配权限按钮
     * @param index
     * @param row
     * @constructor
     */
    assignPermission (index, row) {
      // this.treeInfo.checkedKeyList = []
      this.treeInfo.permissionTreeLoading = true
      listCheckedPermissionForRole(row.id).then(({ data }) => {
        this.$refs.tree.setCheckedKeys(data)
        this.treeInfo.permissionTreeLoading = false
      })
      this.currentRoleId = row.id
      this.assignFormVisible = true
    },
    /**
     * 切换页码
     * @param value
     */
    currentPage (value) {
      this.pagination.current = value
      this.getTableData()
    },
    /**
     * 表格多选选择
     * @param value
     */
    selectionChange (value) {
      this.tableSelectData = value
    },
    /**
     * 分配角色确定按钮
     */
    assignFormSubmit () {
      this.loadingBtn.diaSubmitBtn = true
      const checkList = this.$refs.tree.getCheckedKeys()
      const halfList = this.$refs.tree.getHalfCheckedKeys()
      const data = {
        checkList,
        halfList,
        id: this.currentRoleId
      }
      assignmentPermissionForRole(data).then(({ code, msg }) => {
        if (code === this.$constant.SUCCESS) {
          this.$message.success(msg)
          this.assignFormVisible = false
        }
        this.loadingBtn.diaSubmitBtn = false
      })
    },
    getRightsList () {
      getRightsList().then(({ code, data }) => {
        this.treeInfo.permissionTreeData = data
      })
    },
    delSelectDataAction () {
      const tableSelectData = this.tableSelectData.map(item => item.id)
      batchDeletionByIdList(tableSelectData).then(({ code, msg }) => {
        if (code === this.$constant.SUCCESS) {
          this.$message.success(msg)
          this.getTableData()
        }
      })
    },
    delSelectData () {
      if (this.tableSelectData && this.tableSelectData.length > 0) {
        this.$confirm('是否确认批量删除?', '确认批量删除').then(_ => {
          this.delSelectDataAction()
        }).catch(_ => {
        })
      }
    }
  },
  created () {
    this.getTableData()
    this.getRightsList()
  }
}
</script>

<style scoped>
</style>
